<template>
  <svg class="spinner" viewBox="0 0 86 86" width="86" height="86">
    <title>Loading</title>
    <rect
      x="3"
      y="3"
      :width="width"
      :height="height"
      :rx="radiusFactor"
      :ry="radiusFactor"
      :stroke-dasharray="`${perimeter / 3} ${(2 * perimeter) / 3}`"
      :stroke-dashoffset="perimeter"
      class="rotatingBorder"
      :style="{ stroke: wallet?.iconAccent || '#0D3887' }"
    />
  </svg>
</template>
<script setup lang="ts">
  import type { WalletConnector } from '../../wallets/useWalletConnectors'

  withDefaults(defineProps<{ wallet?: WalletConnector }>(), {
    // @ts-ignore
    wallet: {} as WalletConnector
  })

  const width = 80
  const height = 80
  const radiusFactor = 20

  const perimeter = 2 * (width + height - 4 * radiusFactor)
</script>

<style lang="scss" scoped>
  .spinner {
    position: absolute;
  }
  .rotatingBorder {
    animation: snakeBorder 1s linear infinite;
    stroke-dasharray: 98 196; /*Adjusted based on new perimeter calculation*/
    fill: none;
    stroke-linecap: round;
    stroke-width: 4; /* Reduced stroke width for better appearance on a smaller spinner */
  }

  @keyframes snakeBorder {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -283; /* Adjusted based on new perimeter calculation*/
    }
  }
</style>
